<template>
  <el-drawer
    :visible.sync="dialogVisible"
    :before-close="handleDialogClose"
    :close-on-press-escape="false"
    :size="showMobilePage ? '100%' : 650"
    append-to-body>
    <Detail v-if="flag" ref="approvalDetail" :list-params="listParams" is-drawer @toBack="handleDialogClose" @goNextApproveDetail="goNextApproveDetail" @freshCardData="freshCardData"/>
  </el-drawer>
</template>

<script>
import { mapState } from 'vuex';
import Detail from '@/views/approvalModule/approvalList/detail';

export default {
  components: { Detail },
  props: {
  },
  data() {
    return {
      flag: true,
      dialogVisible: false,
      listParams: {}
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo,
      'showMobilePage': state => state.app.showMobilePage

    })
  },
  watch: {
    '$route': {
      handler(to, from) {
        if (to.name !== 'approvalList') this.handleDialogClose();
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    openDrawer(listParams) {
      this.listParams = listParams || {};
      const { id, processId } = listParams;
      if (!id || !processId) {
        this.$message.warning('无法获取ID');
        return;
      }
      this.freshDetail();
      this.dialogVisible = true;
    },
    freshDetail() {
      this.flag = false;
      this.$nextTick(() => {
        this.flag = true;
      });
    },
    handleDialogClose() {
      this.dialogVisible = false;
      this.listParams = {};
    },
    goNextApproveDetail({ moduleId, id, processId, detailId }) {
      this.freshCardData({ moduleId, id: detailId });
      this.listParams = Object.assign(this.listParams, { id, processId });
      this.freshDetail();
    },
    freshCardData({ moduleId, id }) {
      this.$emit('freshCardData', { moduleId, id });
    }
  }
};
</script>

<style lang="scss" scoped>
  ::v-deep {
    .el-drawer__header {
      display: none;
    }
    .el-drawer__body {
      padding: 0 !important;
    }
    .header-container {
      border-bottom: 1px solid rgba(221, 225, 234, 0.7);
    }
  }
</style>
